<template>
  <div>
    <vm-common-header
      :pageTitle="pageTitle"
      :goBack="goBack"></vm-common-header>
    <div class="vm-common-work_bench container">
      <mt-loadmore
        :top-method="loadTop"
        :bottom-method="loadBottom"
        :bottom-all-loaded="allLoaded"
        ref="loadmore"
        :autoFill="false">
        <!-- start -->
        <swipeout>
          <swipeout-item :disabled="disabled" ref="swipeoutItem" :right-menu-width="210" :sensitivity="15"  v-for="(item, key) in materialList" :key="key">
            <div slot="right-menu">
              <swipeout-button
                style="background-color: #f0ad4e;"
                @click.native="examine(item,2,key)"
                type="primary">
                审核
              </swipeout-button>
              <swipeout-button
                style="background-color: #dd524d;"
                @click.native="discarded(item,3,key)"
                type="primary">
                弃审
              </swipeout-button>
            </div>
            <div slot="content" class="demo-content vux-1px-b">
              <ul>
                <li ref="oli" class="mui-selected vm-work_bench-item mui-table-view-cell">
                  <router-link class="mui-slider-handle" tag="div" :to="`/common_details/${item.ID}/物料详情`">
                    <h5 class="vm-work_bench-item-title">
                      <h3>物料名称：{{ item.cInventoryName }}</h3>
                      <x-icon type="ios-arrow-right" size="22"></x-icon>
                    </h5>
                    <div class="vm-work_bench-item-body">
                      <div>
                        <span>物料编码：</span>
                        <em>{{ item.cInventoryCode }}</em>
                      </div>
                      <div>
                        <span>审核状态：</span>
                        <em class="is-status-o" v-if="item.nflag == 2">已审核</em>
                        <em class="is-status-n" v-else>未审核</em>
                      </div>
                    </div>
                  </router-link>
                </li>
              </ul>
            </div>
          </swipeout-item>
        </swipeout>
        <vm-common-noData v-if="!materialList.length"></vm-common-noData>
        <!-- end -->
      </mt-loadmore>
    </div>
  </div>
</template>

<script>
import vmCommonHeader from '@/components/vm-common-header' // header 组件
import {Swipeout, SwipeoutItem, SwipeoutButton} from 'vux'
import {MessageBox} from 'mint-ui';
import { getInventorylist } from '@/api/work_bench.js'
import {verify, Inventory_delete} from '@/api/work_bench.js'

export default {
  data() {
    return {
      pageTitle: this.$route.meta.pageTitle,
      goBack: this.$route.meta.goBack,
      materialList: new Array(),
      materialPage: 1,
      materialListRows: 15,
      allLoaded: false,
      disabled: false
    }
  },
  components: {
    'vm-common-header': vmCommonHeader,
    Swipeout,
    SwipeoutItem,
    SwipeoutButton

  },
  created() {
    this.getInventorylistData();
  },
  mounted() {
    this.$mui.init({
      gestureConfig: {
        tap: true, //默认为true
        doubletap: true, //默认为false
        longtap: true, //默认为false
        swipe: true, //默认为true
        drag: true, //默认为true
        hold: false,//默认为false，不监听
        release: false//默认为false，不监听
      }
    });
  },
  methods: {
    getInventorylistData(loadmoreType) {
      let materialPage = this.materialPage;
      let materialListRows = this.materialListRows;
      getInventorylist(materialPage, materialListRows).then(res => {
        if (!res.data.data.length) {
          this.allLoaded = true; // 若数据已全部获取完毕
        }
        if (!this.materialList.length || materialPage == 1) {
          this.allLoaded = false;
          this.materialList = res.data.data;
        } else {
          this.materialList = this.materialList.concat(res.data.data);
        }
        if (loadmoreType == 'top') {
          this.$refs.loadmore.onTopLoaded();
        } else  if (loadmoreType == 'bottom'){
          this.$refs.loadmore.onBottomLoaded();
        }
      })
    },
    loadTop() {
      this.materialPage = 1;
      this.getInventorylistData('top');
    },
    loadBottom() {
      this.materialPage++;
      this.getInventorylistData('bottom');
    },
    // 审核
    examine(item, type, key) {
      let id = item.ID;
      let flag = item.nflag; // 2为未审核
      if (flag == '2') {
        this.$toast('审核通过无法操作');
        this.$mui.swipeoutClose(this.$refs.oli[key]);
        return;
      }
      MessageBox.confirm('确定是否审核？').then(action => {
        verify(id, type).then(res => {
          if (res.status == 200) {
            this.materialList[key].nflag = 2;
            this.$toast('操作成功');
            this.$mui.swipeoutClose(this.$refs.oli[key]);
          }
        })
      }).catch(() => {
        this.$mui.swipeoutClose(this.$refs.oli[key]);
      })
    },
    // 弃审
    discarded(item, type, key) {
      let id = item.ID;
      let flag = item.nflag; // 2为未审核
      if (flag != '2') {
        this.$toast('未审核无需弃核');
        this.$mui.swipeoutClose(this.$refs.oli[key]);
        return;
      }
      MessageBox.confirm('确定是否审核？').then(action => {
        verify(id, type).then(res => {
          if (res.status == 200) {
            this.$toast('操作成功');
            this.materialList[key].nflag = 3;
            this.$mui.swipeoutClose(this.$refs.oli[key]);
          }
        })
      }).catch(() => {
        this.$mui.swipeoutClose(this.$refs.oli[key]);
      })
    },
    // 删除
    deleteItem(item, type, key) {
      let id = item.ID;
      let flag = item.nflag; // 2为未审核
      MessageBox.confirm('确定是否删除？').then(action => {
        Inventory_delete(id).then(res => {
          if ( res.status == 200 ) {
            this.$mui.swipeoutClose(this.$refs.oli[key]);
            this.materialList.splice(key,1);
            this.$toast('删除成功');
          }
        })
      }).catch(() => {
        this.$mui.swipeoutClose(this.$refs.oli[key]);
      })

    }
  }
}
</script>

<style lang="scss" scoped>
  .vm-work_bench-item-body {
    flex-direction: column;
  }
</style>
